

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BootstrapDemo</title>
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <style>
        #update-user .modal-dialog{width:490px;margin-top: 130px;}
        #update-user .modal-header{background-color:#222;color: #fff;height:80px;}
        #update-user .modal-body fieldset{margin:0px auto;width:360px;}
        #update-user .modal-body .form-step-1{}
        #update-user .modal-body .form-step-1 nav a{color:#333;width:176px;display: inline-block;text-decoration: none;}
        #update-user .modal-body .form-step-1 nav .step-1{border-bottom: 1px solid #0084B4;}
        #update-user .modal-body .form-step-1 nav .step-2{border-bottom: 1px solid #ddd;margin-left:2px}
        #update-user .modal-body .form-step-1 .clear{clear: both}
        #update-user .modal-body .form-step-1 h3{text-align:center;font-weight:700; }
        #update-user .modal-body .form-step-1 .note{text-align: center;color:#888;}
        #update-user .modal-body .form-step-1 form{width:360px;margin:20px auto}
        #update-user .modal-body .form-step-1 form label{color:#666;font-family: "微软雅黑"}
        #update-user .modal-body .form-step-1 form button{width:100%;}
        #update-user .modal-body .form-step-1 form p{text-align: center;margin-top: 20px}
        /* form-step-2 start*/
        #update-user .modal-body .form-step-2{display: none;}
        #update-user .modal-body .form-step-2 nav a{width:176px;display: inline-block;text-decoration: none;}
        #update-user .modal-body .form-step-2 nav .step-1{color:#82b541;border-bottom: 1px solid #82b541;}
        #update-user .modal-body .form-step-2 nav .step-1:hover{cursor: pointer;color: #178E0E;border-bottom: 1px solid #178E0E;}
        #update-user .modal-body .form-step-2 nav .step-2{color:#333;border-bottom: 1px solid #0084B4;margin-left:2px}
        #update-user .modal-body .form-step-2 h3{text-align:center;font-weight:700; }
        #update-user .modal-body .form-step-2 form{width:360px;margin:20px auto}
        #update-user .modal-body .form-step-2 form label{color:#666;font-family: "微软雅黑"}
        #update-user .modal-body .form-step-2 form button{width:100%;}
        #update-user .modal-body .form-step-2 form p{text-align: center;margin-top: 20px}
    </style>
</head>
<body>

<div class="container-fluid">

    <div id="update-user" class="modal fade in" style="display: block">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <button type="button" class="close" data-dismiss="modal"><span  aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h2 class="modal-title">Modify</h2>
                </div>
                <div class="modal-body">
                    <fieldset class="form-step-1">
                        <form role="form" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">昵称</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="nickname">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">年龄</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="age">
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">性别</label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" value="1">男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" value="2">女
                                </label>
                            </div>
                            <button type="button" class="btn btn-success btn-lg">Modify your information</button>
                            <p><a href="#">Modify your password</a></p>
                        </form>
                    </fieldset><!-- /.form-step-1 -->
                    <fieldset class="form-step-2">
                        <form role="form" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">密码</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" placeholder="nickname">
                                    <span class="help-block">qqq</span>
                                </div>
                            </div>
                            <button type="button" style="margin-top:16px;" class="btn btn-success btn-lg">Modify your password</button>
                            <p><a href="#">Modify your information</a></p>
                        </form>
                    </fieldset><!-- /.form-step-1 -->
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>